<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>

        <ui:composition template="/WEB-INF/templates/template.xhtml">

            <ui:define name="navigation">
                <h:form id="navForm">
                    <ul title="Navigation">
                        <li><h:commandLink id="startNewGame" value="#{msg.restart}" actionListener="#{lc.gc.init()}" tabindex="1"/></li>
                        <li><h:commandLink id="logout" action="#{lc.logout()}" value="#{msg.logout} (#{lc.name})" tabindex="2"/></li>
                    </ul>
                </h:form>
            </ui:define>

            <ui:define name="main-area">
                <div id="main-area">
                    <h:panelGroup layout="block" id="info" class="info">
                        <h2>#{msg.gameinfo}</h2>
                        <table summary="#{msg.gameinfotable}">
                            <tr>
                                <th id="leaderLabel" class="label">#{msg.gameinfoleader}</th>
                                <td id="leader" class="data">
                                    <h:outputText value="#{lc.gc.leader == null ? msg.gameinfoleaderseveral : lc.gc.leader.name}"/>
                                </td>
                            </tr>
                            <tr>                    
                                <th id="roundLabel" class="label">#{msg.gameinforound}</th>
                                <td id="round" class="data">#{lc.gc.round}</td>
                            </tr>
                            <tr>
                                <th id="timeLabel" class="label">#{msg.gameinfotime}</th>
                                <td id="time" class="data">#{lc.gc.time}"</td>
                            </tr>
                            <tr>
                                <th id="computerScoreLabel" class="label">#{msg.scoreplayer2} <em>#{lc.gc.player2.name}</em></th>
                                <td id="computerScore" class="data">#{lc.gc.computerScore}</td>
                            </tr>  	      	      	    
                        </table>   
                        <h2>#{msg.player}</h2>
                        <table summary="#{msg.playerstable}">
                            <tr>
                                <th id="player1NameLabel" class="label">#{msg.player1}</th>
                                <td id="player1Name" class="data">#{lc.gc.player1.name}</td>
                            </tr>
                            <tr>
                                <th id="player2NameLabel" class="label">#{msg.player2}</th>
                                <td id="player2Name" class="data">#{lc.gc.player2.name}</td>
                            </tr>
                        </table>
                        <a href="http://#{lc.gc.avatarPlayer1.wikiUrl}" target="Wikipedia"><img src="#{lc.gc.avatarPlayer1.url}" alt="Wikipedia-Eintrag zu #{lc.gc.avatarPlayer1.name}"/></a>
                    </h:panelGroup>
                    <div id="field" class="field">
                        <h2 class="accessibility">#{msg.playarea}</h2>
                        <ol id="road">
                            <li id="start_road">
                                <span class="accessibility">#{msg.fieldstart}</span>
                                <h:panelGroup rendered="#{gc.player1.getPositionMinusT(0) eq 0}"><span id="player1"><span class="accessibility"><em>#{msg.player1}</em></span></span></h:panelGroup>
                                <h:panelGroup rendered="#{gc.player2.getPositionMinusT(0) eq 0}"><span id="player2"><span class="accessibility"><em>#{msg.player2}</em></span></span></h:panelGroup>
                            </li>
                            <li class="empty_road" id="road_1">
                                <span class="accessibility">#{msg.field2}</span>
                                <h:panelGroup rendered="#{gc.player1.getPositionMinusT(0) eq 1}"><span id="player1"><span class="accessibility"><em>#{msg.player1}</em></span></span></h:panelGroup>
                                <h:panelGroup rendered="#{gc.player2.getPositionMinusT(0) eq 1}"><span id="player2"><span class="accessibility"><em>#{msg.player2}</em></span></span></h:panelGroup>
                            </li>
                            <li class="oil_road" id="road_2">
                                <span class="accessibility">#{msg.field3}</span>
                                <h:panelGroup rendered="#{gc.player1.getPositionMinusT(0) eq 2}"><span id="player1"><span class="accessibility"><em>#{msg.player1}</em></span></span></h:panelGroup>
                                <h:panelGroup rendered="#{gc.player2.getPositionMinusT(0) eq 2}"><span id="player2"><span class="accessibility"><em>#{msg.player2}</em></span></span></h:panelGroup>
                            </li>
                            <li class="empty_road" id="road_3">
                                <span class="accessibility">#{msg.field4}</span>
                                <h:panelGroup rendered="#{gc.player1.getPositionMinusT(0) eq 3}"><span id="player1"><span class="accessibility"><em>#{msg.player1}</em></span></span></h:panelGroup>
                                <h:panelGroup rendered="#{gc.player2.getPositionMinusT(0) eq 3}"><span id="player2"><span class="accessibility"><em>#{msg.player2}</em></span></span></h:panelGroup>
                            </li>
                            <li class="empty_road"  id="road_4">
                                <span class="accessibility">#{msg.field5}</span>
                                <h:panelGroup rendered="#{gc.player1.getPositionMinusT(0) eq 4}"><span id="player1"><span class="accessibility"><em>#{msg.player1}</em></span></span></h:panelGroup>
                                <h:panelGroup rendered="#{gc.player2.getPositionMinusT(0) eq 4}"><span id="player2"><span class="accessibility"><em>#{msg.player2}</em></span></span></h:panelGroup>
                            </li>
                            <li class="oil_road" id="road_5">
                                <span class="accessibility">#{msg.field6}</span>
                                <h:panelGroup rendered="#{gc.player1.getPositionMinusT(0) eq 5}"><span id="player1"><span class="accessibility"><em>#{msg.player1}</em></span></span></h:panelGroup>
                                <h:panelGroup rendered="#{gc.player2.getPositionMinusT(0) eq 5}"><span id="player2"><span class="accessibility"><em>#{msg.player2}</em></span></span></h:panelGroup>
                            </li>
                            <li id="finish_road">
                                <span class="accessibility">#{msg.fieldend}</span>
                                <h:panelGroup rendered="#{gc.player1.getPositionMinusT(0) eq 6}"><span id="player1"><span class="accessibility"><em>#{msg.player1}</em></span></span></h:panelGroup>
                                <h:panelGroup rendered="#{gc.player2.getPositionMinusT(0) eq 6}"><span id="player2"><span class="accessibility"><em>#{msg.player2}</em></span></span></h:panelGroup>
                            </li>
                        </ol>
                    </div>
                    <h:panelGroup layout="block" id="player" class="player">
                        <h2 class="accessibility">#{msg.dice}</h2>
                        <h:panelGroup rendered="#{lc.gc.round == 1}" ><span class="accessibility">#{msg.nextplayer}</span><div id="currentPlayerName">#{lc.gc.player1.name}</div></h:panelGroup>
                        <h:panelGroup rendered="#{lc.gc.round != 1}" ><span class="accessibility">#{lc.gc.gameOver == true ? msg.gameover :""}#{msg.lastplayerscore}</span><div id="currentPlayerName">#{lc.gc.player1.name}</div><span class="accessibility">#{msg.lastplayerscoresuffix}</span></h:panelGroup>
                        <h:form id="form">
                            <div>
                                <h:commandButton id="dice" tabindex="4" action="#{lc.gc.doRound()}" disabled="#{lc.gc.gameOver}" image="#{resource[lc.gc.diceResource]}" title="#{msg.dicescore} #{lc.gc.playerScore}" alt="#{msg.dicescore} #{lc.gc.playerScore}">
                                    <f:ajax render=":player :info :script"/>
                                </h:commandButton>
                            </div>
                        </h:form>
                    </h:panelGroup>
                </div>

                <h:panelGroup layout="block" id="script" class="script">        
                    <script type="text/javascript">
                        //<![CDATA[
                        doAnimations();

                        function doAnimations() {
                            var timeoutPlayer2 = 0;

                            if (#{lc.gc.round != 1})
                            {
                                setPlayersToLastPosition();
                                timeoutPlayer2 = animatePlayer1();
                                animatePlayer2(timeoutPlayer2);
                            }
                        }

                        function setPlayersToLastPosition() {
                            if (player1ReachedOil()) {
                                $("#player1").appendTo(getFieldId(#{lc.gc.player1.getPositionMinusT(2)}));
                            } else if (player1Moved()) {
                                $("#player1").appendTo(getFieldId(#{lc.gc.player1.getPositionMinusT(1)}));
                            }
                            if (#{lc.gc.computerScore != 0})
                            {
                                if (player2ReachedOil()) {
                                    $("#player2").appendTo(getFieldId(#{lc.gc.player2.getPositionMinusT(2)}));
                                }
                                else if (player2Moved()) {
                                    $("#player2").appendTo(getFieldId(#{lc.gc.player2.getPositionMinusT(1)}));
                                }
                            }
                        }

                        function animatePlayer1() {
                            var animationTime = 0;
                            if (player1ReachedOil()) {
                                doDoubleMove("#player1", getFieldId(#{lc.gc.player1.getPositionMinusT(1)}), getFieldId(#{lc.gc.player1.getPositionMinusT(0)}));
                                animationTime = 1000;
                            } else if (player1Moved()) {
                                doSingleMove("#player1", getFieldId(#{lc.gc.player1.getPositionMinusT(0)}));
                                animationTime = 400;
                            }
                            return animationTime;
                        }

                        function animatePlayer2(timeoutPlayer2) {
                            if (#{lc.gc.computerScore == 0})
                            {
                                $("#player2").appendTo(getFieldId(#{lc.gc.player2.getPositionMinusT(0)}));
                            }
                            else
                            {
                                if (player2ReachedOil()) {
                                    setTimeout(doDoubleMove, timeoutPlayer2, "#player2", getFieldId(#{lc.gc.player2.getPositionMinusT(1)}), getFieldId(#{lc.gc.player2.getPositionMinusT(0)}));
                                } else if (player2Moved()) {
                                    setTimeout(doSingleMove, timeoutPlayer2, "#player2", getFieldId(#{lc.gc.player2.getPositionMinusT(0)}));
                                }
                            }
                        }

                        function player1ReachedOil() {
                            return (#{lc.gc.player1.getPositionMinusT(1) > lc.gc.player1.getPositionMinusT(0)});
                        }

                        function player1Moved() {
                            return (#{lc.gc.player1.getPositionMinusT(1) < lc.gc.player1.getPositionMinusT(0)});
                        }

                        function player2ReachedOil() {
                            return (#{lc.gc.player2.getPositionMinusT(1) > lc.gc.player2.getPositionMinusT(0)});
                        }

                        function player2Moved() {
                            return (#{lc.gc.player2.getPositionMinusT(1) < lc.gc.player2.getPositionMinusT(0)});
                        }

                        function getFieldId(fieldindex) {
                            if (fieldindex == 6) {
                                return "#finish_road";
                            } else if (fieldindex > 0 && fieldindex < 6) {
                                return "#road_" + fieldindex;
                            }
                            return "#start_road";
                        }

                        function doSingleMove(playerId, fieldId) {
                            $(playerId).fadeOut(200, function() {
                                $(playerId).appendTo(fieldId);
                                $(playerId).fadeIn(200);
                            });
                        }

                        function doDoubleMove(playerId, fieldId1, fieldId2) {
                            $(playerId).fadeOut(200, function() {
                                $(playerId).appendTo(fieldId1);
                                $(playerId).fadeIn(200, function() {
                                    $(playerId).fadeOut(200, function() {
                                        $(playerId).appendTo(fieldId2);
                                        $(playerId).fadeIn(200);
                                    });
                                });
                            });
                        }

                        //]]>
                    </script>
                </h:panelGroup>
            </ui:define>
        </ui:composition>
    </body>
</html>
